<template>
    <div>
        <header class="demos-header">
            <h1 class="demos-title">设备管理</h1>
        </header>
        <div class="bd">
            <div class="page__bd">
                <div v-if="Object.keys(this.devices).length > 0">
                    <div class="weui-cells__title">已绑定的设备列表</div>
                    <div class="weui-cells">
                        <table class="table table-striped" style="font-size: 4vw">
                            <thead>
                            <tr>
                                <th>设备名称</th>
                                <th>绑定日期</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="devices_table">
                            <tr v-for="(device, sn) in devices">
                                <td>
                                    <!--<input @onchange="changeCtl" type="radio" :id="(device && device['name']) || ''" :value="(device && device['name']) || ''" v-model="picked" />-->
                                    <div class="weui-btn weui-btn_mini weui-btn_primary" @click="changeCtl(sn)" v-text="(device.hasOwnProperty('create_time') && userInfo['devices'][sn]['name']) || ''"></div>
                                </td>
                                <td v-text="(device.hasOwnProperty('create_time') && (new Date(device['create_time']['$date'] || '')).format('yyyy-MM-dd hh:mm:ss')) || ''"></td>
                                <td>
                                    <a class="weui-btn weui-btn_mini weui-btn_warn" @click="deleteDevice(sn)">删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div v-else>
                    <div class="alert alert-success" style="margin-top: 5vw">没有绑定设备</div>
                </div>
            </div>


            <div class="weui-cell__bd txtc w100">
                <div @click="$emit(
                   'state',
                    {
                        page: 'add_device'
                    }
                )" class="weui-btn weui-btn_mini weui-btn_primary">
                    添加设备
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {http} from "../../static/js/common";

    export default {
        props: ['userInfo', 'devices'],
        data() {
            return {
                picked: '',
                msg: 'Welcome 1112 Your Vue.js App'
            }
        },
        methods: {
            changeCtl(sn)
            {
                http({
                    url: 'change_device',
                    param: {
                        sn: sn
                    }
                }).then(data => {
                    if (data.err === 0) {
                        this.userInfo['ctl'] = sn;
                        this.$emit('state', {
                            userInfo: this.userInfo,
                            page: 'view_device'
                        });
                    } else {
                        $.alert("失败", "切換设备失败。", function () {
                        });
                    }
                });
            },
            deleteDevice(sn) {
                http({
                    url: 'del_device',
                    param: {
                        sn: sn
                    }
                }).then(data => {
                    if (data.err === 0) {
                        delete this.devices[sn];
                        $.alert("成功", "设备已经删除成功，点击确定返回。", () => {
                        });

                        http({
                            url: `get_user_info`,
                            param: {}
                        }).then(data => {
                            this.$emit('state', {
                                userInfo: data.info,
                                page: data.page,
                                devices: this.devices
                            });
                        });
                    } else {
                        $.alert("失败", "设备删除失败。", function () {
                        });
                    }
                });
            }
        },
        created() {
            console.log(this.devices)
            console.log(this.userInfo)
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #devices_table > tr > td {
        vertical-align: middle
    }
</style>
